<script setup lang="ts">
import CardComponent from './components/CardComponent.vue'
import { ref } from 'vue'

// Example data for Scenario A
const thumbnailUrl = ref('https://picsum.photos/id/101/800/600')
const itemName = ref('Product Name')
const soldQuantity = ref(100)
const reviewedQuantity = ref(50)
const price = ref('$99.99')

// Example data for Scenario B
const itemTitle = ref('Title of the Item')
const itemSummary = ref('Brief summary of the item')

// Example data for Scenario C
const employeePhoto = ref('https://picsum.photos/id/101/800/600')
const employeeName = ref('John Doe')
const employeePosition = ref('Software Developer')
</script>

<template>
  <header class="grid grid-cols-3 w-full justify-center items-center p-4 shadow-md mb-8">
    <div class="justify-self-start flex items-center space-x-2 text-indigo-900">
      <h1>WayTale</h1>
    </div>
    <div class="w-full flex space-x-4 justify-center"></div>
  </header>

  <main class="px-8">
    <section class="grid grid-cols-3 gap-8">
      <CardComponent
        type="A"
        :thumbnail="thumbnailUrl"
        :itemName="itemName"
        :soldQuantity="soldQuantity"
        :reviewedQuantity="reviewedQuantity"
        :price="price"
        :title="itemTitle"
        :summary="itemSummary"
        :photo="employeePhoto"
        :name="employeeName"
        :position="employeePosition"
      />
      <CardComponent
        type="B"
        :thumbnail="thumbnailUrl"
        :itemName="itemName"
        :soldQuantity="soldQuantity"
        :reviewedQuantity="reviewedQuantity"
        :price="price"
        :title="itemTitle"
        :summary="itemSummary"
        :photo="employeePhoto"
        :name="employeeName"
        :position="employeePosition"
      />
      <CardComponent
        type="C"
        :thumbnail="thumbnailUrl"
        :itemName="itemName"
        :soldQuantity="soldQuantity"
        :reviewedQuantity="reviewedQuantity"
        :price="price"
        :title="itemTitle"
        :summary="itemSummary"
        :photo="employeePhoto"
        :name="employeeName"
        :position="employeePosition"
      />
    </section>
  </main>
</template>
